<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp"%>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
<style>
    #mapContainer{height: 600px}
    <%--百度地图取消显示logo--%>
    .BMap_cpyCtrl {display: none;}
    .anchorBL {display: none;}
</style>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>${titleName}</h2>
        </div>
        <div class="subfiled-content" style="height: auto;margin-bottom: 10px;padding-left: 10px">
            搜索：<input id="suggestId" class="input" style="width: 40%" placeholder="请输入需要所有的地点"/>
        </div>
        <div class="subfiled-content" id="mapContainer"></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </div>
    <div id="saper-ft"></div>
</div>
<%@ include file="../common/footer.jsp"%>
<script type="text/javascript">

    //创建地图
    var map = new BMap.Map("mapContainer",{
        minZoom : 10
    });         // 创建地图实例
    var point = new BMap.Point(105.2428, 28.31);    // 创建点坐标
    map.centerAndZoom(point, 14);                   // 设置缩放度
    map.enableScrollWheelZoom();                  //启用滚轮放大缩小

    // var geolocation = new BMap.Geolocation();
    //    // geolocation.getCurrentPosition(function(r){
    //    //     if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //    //         map.panTo(r.point);
    //    //     }
    //    //     else {
    //    //         alert('failed'+this.getStatus());
    //    //     }
    //    // },{enableHighAccuracy: true});

    //初始化地图搜索框
    function G(id) {
        return document.getElementById(id);
    }

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {   "input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem&lt;br />index = " + e.fromitem.index + "&lt;br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "&lt;br />ToItem&lt;br />index = " + e.toitem.index + "&lt;br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm&lt;br />index = " + e.item.index + "&lt;br />myValue = " + myValue;

        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    //鼠标获取事件
    map.addEventListener("click",function(e){
        map.clearOverlays();
        var marker = new BMap.Marker(e.point);      // 创建标注
        map.addOverlay(marker);                     // 将标注添加到地图中
    });

</script>
